<!DOCTYPE html>
<html>
	<head>
		<title>Bohai Sea</title>
		<style>
			body {
				margin: 0px;
				background: #EEE;
				font-size: 16px;
				font-family: verdana,helvetica,arial,sans-serif;
			}
			#map3d {
				margin: 20px auto;
			}
			#checkdiv {
				width: 800px;
				margin: auto;
			}
		</style>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script>
			var ge;
			
			var currentKmlObjects = {
				'quiver': null,
				'contour': null,
				'altitude': null
			};
			
			google.load("earth", "1");
			google.setOnLoadCallback(init);
			function init() {
				google.earth.createInstance('map3d', initCB, failureCB);
			}
			
			function initCB(instance) {
				ge = instance;
				ge.getWindow().setVisibility(true);
				// add a navigation control
				ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
				// move it to top-left
				ge.getNavigationControl().getScreenXY().setXUnits(ge.UNITS_PIXELS);
				ge.getNavigationControl().getScreenXY().setYUnits(ge.UNITS_INSET_PIXELS);
				
				var la = ge.createLookAt('');
				la.set(39, 120,
					0, // altitude
					ge.ALTITUDE_RELATIVE_TO_GROUND,
					0, // heading
					0, // straight-down tilt
					600000 // range (inverse of zoom)
				);
				ge.getView().setAbstractView(la);
				
				// if the page loaded with checkboxes checked, load the appropriate
				// KML files
				if (document.getElementById('kml-quiver-check').checked)
					loadKml('quiver');

				if (document.getElementById('kml-contour-check').checked)
					loadKml('contour');

				if (document.getElementById('kml-altitude-check').checked)
					loadKml('altitude');
			}
			
			function failureCB(errorCode) {
			}
			
			function toggleKml(file) {
				// remove the old KML object if it exists
				if (currentKmlObjects[file]) {
					ge.getFeatures().removeChild(currentKmlObjects[file]);
					currentKmlObject = null;
				}

				// if the checkbox is checked, fetch the KML and show it on Earth
				var kmlCheckbox = document.getElementById('kml-' + file + '-check');
				if (kmlCheckbox.checked)
				loadKml(file);
			}
			
			function loadKml(file) {
				var kmlUrl = 'http://bohai-sea-kmz.googlecode.com/svn/trunk/' + file + '.kml';

				// fetch the KML
				google.earth.fetchKml(ge, kmlUrl, function(kmlObject) {
					// NOTE: we still have access to the 'file' variable (via JS closures)
					if (kmlObject) {
						// show it on Earth
						currentKmlObjects[file] = kmlObject;
						ge.getFeatures().appendChild(kmlObject);
					} else {
						// bad KML
						currentKmlObjects[file] = null;

						// wrap alerts in API callbacks and event handlers
						// in a setTimeout to prevent deadlock in some browsers
						setTimeout(function() {
							alert('Bad or null KML.');
						}, 0);

						// uncheck the box
						document.getElementById('kml-' + file + '-check').checked = '';
					}
				});
			}
		</script>
	</head>
	<body>
		<div class="header">
		</div>
		<div id="map3d" style="height: 600px; width: 800px;"></div>
		<div id="checkdiv">
			<h2>Please select to show information:</h2>
			<input type="checkbox" class="checklist" id="kml-quiver-check" onclick="toggleKml('quiver');"/><label for="kml-quiver-check">Show Quivers</label><br/>
			<input type="checkbox" class="checklist" id="kml-contour-check" onclick="toggleKml('contour');"/><label for="kml-contour-check">Show Contours</label><br/>
			<input type="checkbox" class="checklist" id="kml-altitude-check" onclick="toggleKml('altitude');"/><label for="kml-altitude-check">Show Altitude and Color Bar</label><br/>
		</div>
		<div class="footer">
		</div>
	</body>
</html>